---
title: CSS & Class Names
---

Perhaps the most straightforward way to style components is with CSS. We can write CSS, optionally using any pre-processor or post-processor we'd like, and use the `className` attribute of our components to apply styles.

We can acheive dynamic styles by choosing a different `className` based on component `props`, e.g. `className={props.selected ? 'selected-class' : 'normal-class'}`. We can also mix-and-match with inline styles, although combining the two approaches should be kept to a minimum or the code quickly becomes hard to follow.

## In summary:

### Pros

- All the power of CSS (feature-packed)
- Straightforward (nothing new to learn, if you already know CSS)
- Integrates well with non-React libraries that use class names for styling

### Cons

- All the problems of CSS (generally large and unmaintainable codebase)
- Components are not self-contained in a single JavaScript file
- DOM renderer only (no React Native)
